import React, { Component } from 'react'
import { connect } from 'dva';
import { Form, Input, Select, message } from 'antd';
import { SearchRow, SearchCol, SearchButton } from '@/styled/form';
import { DICT } from '../enum';
import { DropDownSelect, DropDownSelectList } from '@/components/DropDownSelect/index';
import { isNumber } from '@/utils/util';

interface Props {
  current: number,
  form: any,
  dispatch?: Function,
  handleExport?: Function,
  initCurrent: Function,
  dict?: Object,
  dictList?: any
}

const FormItem = Form.Item;
const ONE_PAGE_SIZE = 10;
const Option = Select.Option;

@connect(({ analyse_person }) => ({
  dict: analyse_person.dict,
  dictList: analyse_person.dictList,
}))
class Search extends Component<Props, any> {

  state = {
    startNum: '',
    endNum: ''
  };

  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({
      type: 'analyse_person/queryDict',
      payload: {
        keyList: DICT
      }
    });
    dispatch({
      type: 'analyse_person/queryDictList'
    })
  }

  search = e => { e.preventDefault();
    const { dispatch } = this.props;
    this.props.form.validateFields((err, values) => {
      if (!err) {
        let sortType = values.selectedRate;
        let rateStart = (this.state.startNum !== '' ? (+this.state.startNum / 100) : '');
        let rateEnd = (this.state.endNum !== '' ? (+this.state.endNum / 100) : '');
        switch (sortType) {
          case '0': // 报警处理率
            values.handleRateStart = rateStart;
            values.handleRateEnd = rateEnd;
            break;
          case '1': // 任务完成率
            values.finishRateStart = rateStart;
            values.finishRateEnd = rateEnd;
            break;
          case '2': // 值班率
            values.dutyRateStart = rateStart;
            values.dutyRateEnd = rateEnd;
            break;
        }
        delete values.selectedRate;
        dispatch({
          type: 'analyse_person/updateCond',
          payload: {
            pageNum: 1,
            pageSize: 10,
            ...values
          }
        });

        this.props.initCurrent()
      }
    });
  };

  changeExport = () => {
    this.props.handleExport();
  };

  render() {
    const { form, dict = {}, dictList = [] } = this.props;
    const { getFieldDecorator } = form;
    const formItemLayout = {
      labelCol: { span: 8 },
      wrapperCol: { span: 16 },
    };

    return (
      <Form onSubmit={this.search}>
        <SearchRow>
          <SearchCol key={0} span={4}>
            <FormItem
            >
              {getFieldDecorator('selectedRate', {
                initialValue: '0'
              })(
                <Select
                  style={{'width': '160px'}}
                  onChange={() => {
                    this.setState({
                      startNum: '',
                      endNum: ''
                    })
                }}>
                  <Option value="0">报警处理率</Option>
                  <Option value="1">任务完成率</Option>
                  <Option value="2">值班率</Option>
                </Select>
              )}
            </FormItem>
          </SearchCol>
          <SearchCol key={1} span={6}>
            <FormItem
            >
              <>
                <Input style={{'width': '40%'}} placeholder="起" value={this.state.startNum} onChange={(ev) => {this.setState({startNum: ev.target.value})}}/>
                <span style={{'marginRight': '10px'}}>%</span>
              </>
              ~
              <>
                <Input style={{'width': '40%', 'marginLeft': '10px'}} placeholder="止" value={this.state.endNum} onChange={(ev) => {this.setState({endNum: ev.target.value})}}/>
                <span>%</span>
              </>
            </FormItem>
          </SearchCol>
          <SearchCol key={2} span={3}>
            <FormItem
              label="职位"
              {...formItemLayout}
            >
              {getFieldDecorator('position')(
                DropDownSelect(dict, 'user.position')
              )}
            </FormItem>
          </SearchCol>
          <SearchCol key={3} span={3}>
            <FormItem
              label="部门"
              {...formItemLayout}
            >
              {getFieldDecorator('groupId')(
                DropDownSelectList(dictList, '')
              )}
            </FormItem>
          </SearchCol>
          <SearchCol key={4} span={5} style={{marginLeft: '10px'}}>
            <SearchButton htmlType="submit">搜索</SearchButton>
            <SearchButton onClick={(e) => {
              this.props.form.resetFields();
              this.search(e)
              this.setState({
                startNum: '',
                endNum: ''
              })
            }} style={{ 'marginLeft': '15px' }}>重置</SearchButton>
            <SearchButton style={{ 'marginLeft': '15px' }}  onClick={this.changeExport}>导出</SearchButton>
          </SearchCol>
        </SearchRow>
      </Form>
    );
  }
}

const SearchS = Form.create<Props>()(Search);
export default SearchS;
